<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="请输入司机姓名"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.phone"
        placeholder="请输入手机号"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.vehicle"
        placeholder="请输入车牌号"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        @click="handleCreate()"
      >发送短信
      </el-button>
    </div>


    <el-table
      ref="multipleTable"
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="selections"

    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        width=""
      />
      <el-table-column
        prop="phone"
        label="电话"
        align="center"
        width=""
      />
      <el-table-column
        prop="vehicle"
        label="车牌"
        align="center"
        width=""
      />

      <!--<el-table-column-->
        <!--label="状态"-->
        <!--width=""-->
        <!--align="center"-->
      <!--&gt;-->
        <!--<template slot-scope="scope">-->
          <!--{{ scope.row.state | stateFilter }}-->
        <!--</template>-->
      <!--</el-table-column>-->

      <el-table-column
        prop="cardNum"
        label="已买卡数量"
        align="center"
        width=""
      />
      <el-table-column
        label="操作"
        align="center"
        width="300"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="detail(scope.row)"
          >详情
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      :center="true"
      width="30%"
    >
      <span style="font-size: 18px">暂未开通</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="发送短信"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="680px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="listQuery"
        label-position="left"
        label-width="110px"
        style="width:550px; margin-left:50px;"
      >

        <el-form-item
          label="发送条件"
          prop=""
        >
          <el-radio-group v-model="tempDX.type">
            <el-radio :label="1">按查询条件全员发送</el-radio>
            <el-radio :label="2">按选择司机发送</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="发送内容"
          prop=""
        >
          <el-input type="textarea" rows="8" v-model="tempDX.content"/>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="createData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>

    </el-dialog>

  </div>

</template>
<script>
  const defaultFormThead = ["apple", "banana"];
  import {
    tradesUserList,
    cooperationAll,
    down,
    downList,
    tradesUserListSendsms
  } from "@/api/v1";
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import {getToken} from "@/utils/auth";
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import checkPermission from "@/utils/permission"; // 权限判断函数

  export default {
    directives: {waves},
    components: {Pagination},
    filters: {
      stateFilter(role) {
        //是否高挂 1是   2否
        switch (role) {
          case 1:
            return "审核中";
          case 3:
            return "审核成功";
        }
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        isAdmin: true,
        tableData: [],
        dialogVisible: false,
        tableKey: 0,
        list: null,
        total: 0,
        ids: "",
        radio: "1",
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id",
          phone: "",
          vehicle: "",
          cooperation: "",
          name: "",
          content: "",
          startDay: "",
          endDay: ""
        },
        rules: {
          type: [{required: true, message: "请选择类型", trigger: "change"}],
          content: [
            {required: true, message: "请输入要发送的内容", trigger: "blur"}
          ]
        },
        key: 1, // table key
        formTheadOptions: ["apple", "banana", "orange"],
        checkboxVal: defaultFormThead, // checkboxVal
        formThead: defaultFormThead, // 默认表头 Default header
        tempDX: {
          type: 2,
          content: ""
        },
        temp: {
          type: 1,
          content: ""
        },
        multipleSelection: []
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },
    created() {
      const id = this.$route.query.id;
      this.listQuery.cooperation = id;
      this.getList();
      this.getCooperationAll();
      if (checkPermission(["admin"])) {
      } else {
        this.isAdmin = false;
      }
    },
    methods: {


      selections(selection, row) {
        this.multipleSelection = selection;
        for (var i in selection) {
          this.multipleSelection = selection[i].phone;
        }
        this.ids = "";
        selection.forEach(row => {
          if (this.ids == "") {
            this.ids = row.id;
          } else {
            this.ids += "," + row.id;
            console.log('4545454' + this.ids);
          }

        });
      },
      detail(row) {
        this.$router.push({
          path: "/driverDetail",
          query: {
            id: row.id,
            name: row.name,
            phone: row.phone,
            state: row.state,
            vehicle: row.vehicle
          }
        });
      },
      resetTemp() {
        this.temp.type = 1;
        this.temp.content = "";
      },
      handleCreate() {
        this.resetTemp();

        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },
      createData() {
        this.tempDX.name = this.listQuery.name;
        this.tempDX.phone = this.listQuery.phone;
        this.tempDX.vehicle = this.listQuery.vehicle;
        this.tempDX.startDay = this.listQuery.startDay;
        this.tempDX.endDay = this.listQuery.endDay;
        this.tempDX.driverPhonds = this.multipleSelection;
        this.$nextTick(() => {
          tradesUserListSendsms(this.tempDX).then(res => {
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
              duration: 2000
            });
          });
        });

//      this.$refs["tempDX"].validate(valid => {
//
//        if (valid) {
//
//        }
//      });
      },
      handleDownload() {
        down(this.listQuery).then(res => {
          var _this = this;
          var accessToken = getToken();
          if (res.code == 0) {
            _this.listQuery.accessToken = accessToken;
            //          const data = {
            //            accessToken: getToken()
            //          }
            downList(_this.listQuery).then(res => {
              // console.log(res);
              window.open(res.request.responseURL);
            });
          } else {
            this.$message.error(res.msg);
            return;
          }
          // this.$router.push({
          //   path: "/down"
          // });
        });
      },
      getList() {
        this.listLoading = true;
        tradesUserList(this.listQuery).then(res => {
          this.tableData = res.data.records;
          this.total = Number(res.data.total);
          console.log("-----" + this.tableData);
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      },
      getCooperationAll() {
        cooperationAll().then(res => {
          this.cooperation = res.data;

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      }
    }
  };
</script>

